import React, { memo } from 'react';
import { Tooltip } from 'choerodon-ui';

function getFirst(str) {
  if (!str) {
    return '';
  }
  const re = /[\u4E00-\u9FA5]/g;
  for (let i = 0, len = str.length; i < len; i += 1) {
    if (re.test(str[i])) {
      return str[i];
    }
  }
  return str[0];
}

const UserHead = memo(({
  user,
  color,
  size,
  hiddenText,
  style,
  type,
  tooltip = true,
  extraToolTip,
}) => {
  const iconSize = size || 18;
  const {
    id, imageUrl, email, ldap, avatar,
  } = user || {};
  let { loginName, realName, name } = user || {};

  if (!id) {
    loginName = '管理员';
    realName = '管理员';
    name = '管理员';
  }

  const img = avatar || imageUrl;

  const renderTooltip = () => {
    if (name) {
      return name;
    } else if (!extraToolTip) {
      return ldap ? `${realName}(${loginName})` : `${realName}(${email})`;
    } else if (extraToolTip) {
      return ldap ? (
        <span>
          {`${realName}(${loginName})`}
          <br />
          {extraToolTip}
        </span>
      ) : (
        <span>
          {`${realName}(${email})`}
          <br />
          {extraToolTip}
        </span>
      );
    }
  };

  const renderContent = () => (
    <div
      className="c7n-userHead"
      style={{
        display: (id || loginName) ? 'flex' : 'none',
        maxWidth: 108,
        ...style,
      }}
    >
      {
        type === 'datalog' ? (
          <div
            style={{
              width: 40,
              height: 40,
              background: '#b3bac5',
              color: '#fff',
              overflow: 'hidden',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              textAlign: 'center',
              borderRadius: 4,
              flexShrink: 0,
            }}
          >
            {
              img ? (
                <img src={img} alt="" style={{ width: '100%' }} />
              ) : (
                <span
                  style={{
                    width: 40, height: 40, lineHeight: '40px', textAlign: 'center', color: '#fff', fontSize: '12px',
                  }}
                  className="user-Head-Title"
                >
                  {getFirst(realName)}
                </span>
              )
            }
          </div>
        ) : (
          <div
            style={{
              width: iconSize,
              height: iconSize,
              background: '#c5cbe8',
              color: '#6473c3',
              overflow: 'hidden',
              display: 'flex',
              justifyContent: 'center',
              alignItems: 'center',
              marginRight: 5,
              textAlign: 'center',
              borderRadius: '50%',
              flexShrink: 0,
            }}
          >
            {
              img ? (
                <img src={img} alt="" style={{ width: iconSize, height: iconSize }} />
              ) : (
                <span style={{
                  width: iconSize, height: iconSize, lineHeight: `${iconSize}px`, textAlign: 'center', color: '#6473c3',
                }}
                >
                  {getFirst(realName)}
                </span>
              )
            }
          </div>
        )
      }
      {
        hiddenText ? null : (
          <span
            style={{
              overflow: 'hidden',
              textOverflow: 'ellipsis',
              whiteSpace: 'nowrap',
              fontSize: '13px',
              lineHeight: `${iconSize}px`,
              color: color || 'rgba(0, 0, 0, 0.65)',
            }}
          >
            {`${realName || loginName}`}
          </span>
        )
      }
    </div>
  );
  return tooltip
    ? (
      <Tooltip title={renderTooltip()} mouseEnterDelay={0.5}>
        {renderContent()}
      </Tooltip>
    )
    : renderContent();
});
export default UserHead;
